{include file="public/header"/}
<style>
    .layui-col-xs4 .layui-form-radio, .layui-col-xs12 .layui-form-radio {
        width: 100%;
    }
</style>
<div class="layui-container" style="width: 100%;">
    <div class="layui-main">
        <!-- 选择支付 -->
        <div class="layui-row" id="paySelectMoulde">
            <form class="layui-form" autocomplete="off">
                <div class="zent-block-header block-header margin-bottom-5" style="padding: 0;">
                    <div class="zent-block-header__title zent-block-header__title-ribbon">
                        <h3>购买商品</h3>
                    </div>
                </div>
                <input name="order_id" type="hidden" class="layui-input" value="{$info.id ?? ''}">
                <div class="layui-elem-quote layui-font-16 margin-bottom-30">
                    {foreach $info.orderGoods as $val}
                    <div class="item">
                        {if $val.product_type == 10}
                            <div class="justify-content-center">
                                <img style="background-color: {$val.background_color};margin-right: 0px;" src="{$val['img']}" class="user-goods-img" style="width: 60px;height: 60px;">
                                <span class="exam-sub-title">{$val.sub_title}</span>
                            </div>
                        {else}
                            <img class="user-goods-img" src="{$val.img}" style="width: 60px;height: 60px;">
                        {/if}
                        <div class="detail layui-ellip" style="width: 100%;">
                            <div class="product-title space-between">
                                <p class="layui-ellip">
                                    <span class="item-title-label">{$val.product_type_text}</span>
                                    {$val.product_name}
                                </p>
                                <div>￥{$val.price}</div>
                            </div>
                            <div class="space-between" style="margin-top: 10px;color:#7a7a7a;">
                                <p class="layui-font-14">规格：{$val.attr_name}</p>
                                <p>x{$val.num}</p>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                    <div class="align-items-center margin-top-20">
                        <div>应付金额：</div>
                        <div class="layui-font-red layui-font-28">
                            <span class="symbol">￥</span><span class="pay-price">{$info.pay_price}</span>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-col-space10">
                    <div class="layui-col-xs4">
                        <input type="radio" name="pay_type" value="1" lay-skin="none" checked>
                        <div lay-radio class="lay-skin-checkcard lay-check-dot" style="height: 76px;">
                            <div class="lay-skin-checkcard-detail" style="line-height: 50px;">
                                <div class="justify-content-center">
                                    <img style="width:34px;" class="margin-right-10" src="/static/images/order/wx-pay.png">
                                    <span class="layui-font-16">微信支付</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <input type="radio" name="pay_type" value="2" lay-skin="none" disabled>
                        <div lay-radio class="lay-skin-checkcard lay-check-dot" style="height: 76px;">
                            <div class="lay-skin-checkcard-detail" style="line-height: 50px;">
                                <div class="justify-content-center">
                                    <img style="width:30px;" class="margin-right-10" src="/static/images/alipay.png">
                                    <span class="layui-font-16">支付宝支付</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-align-center" style="margin-top: 60px;margin-bottom: 60px;">
                    <button type="button" class="layui-btn layui-bg-red layui-btn-xl width-220" lay-submit lay-filter="payButton">
                        立即支付
                    </button>
                </div>
            </form>
        </div>
        <!-- 微信支付 -->
        <div id="payWxcodeMoulde" style="display: none;">
            <div class="layui-payment-wxcode">
                <div class="code-infor space-between">
                    <div class="code-infor-content">
                        <div class="justify-content-center">
                            <img src="/static/images/order/wx-pay.png">
                            <p class="margin-left-10">请使用微信扫一扫 <br> 扫二维码支付</p>
                        </div>
                        <div class="code-box" style="background-image: url(/static/images/order/wxpay-code.png);">
                            <div id="wxpay-qrcode">
                            </div>
                        </div>
                        <p class="tips"><span class="layui-font-success font-weight-bold number">5</span> 分钟后二维码失效，请尽快支付</p>
                    </div>
                    <img src="/static/images/order/phone.png" class="phone-img">
                </div>
                <div class="layui-font-success switch-button">[ 更换支付方式 ]</div>
            </div>
        </div> 
    </div>
</div>

<script type="text/javascript">
     layui.use(['form','layer'], function(){
        var layer = layui.layer, form = layui.form, $ = layui.$;

        // 创建订单
        form.on('submit(payButton)', function(data){
            var loading = layer.load();
            $.ajax({
                url:'/order/continue_pay',
                type:'post',
                data:data.field,
                dataType:"JSON",
                success:function(res){
                    layer.close(loading);  //返回数据关闭loading
                    if(res.code == 0){
                        getPayInfo(res.data);
                    }
                    else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.close(loading);
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
                
            });
            return false;
        });

        var index = parent.layer.getFrameIndex(window.name);//获取父层弹窗索引
        // 支付信息
        function getPayInfo(data) {
            var pay_type = $('input[name="pay_type"]:checked').val();
            if (pay_type == 1) {
                $("#paySelectMoulde").hide();
                $("#payWxcodeMoulde").show();
                $("#wxpay-qrcode").html('<img src="'+data.qrcode_url+'">')
                // 微信支付
                parent.layer.title('微信支付', index);
                checkOrderPay(data.order_id);
            }
        }

        // 更换支付方式
        $(".switch-button").click(function(){
            $("#payWxcodeMoulde").hide();
            $("#paySelectMoulde").show();
            parent.layer.title('选择支付方式', index);
            clearInterval(timer);
        })

        // 定时器变量
        var timer = null;
        
        // 检查订单是否支付
        function checkOrderPay(order_id) {
            timer = setInterval(function() {
                $.ajax({
                    url:'/order/check_order_pay',
                    type:'post',
                    data:{"order_id":order_id},
                    dataType:"JSON",
                    success:function(res){
                        if(res.code == 0){ // 支付成功
                            layer.msg(res.msg,{icon: 1,time:1500},function(){
                                var index= parent.layer.getFrameIndex(window.name);//获取当前层
                                parent.layer.close(index);//关闭当前层
                                parent.location.reload();
                            })
                        }
                    }
                });
            }, 5000);
        }

        // 启动定时器
        function startTimer(order_id) {
            if (isRunning) return;
            isRunning = true;
            // 设置定时器
            timer = setInterval(checkOrderPay(order_id), 5000);
        }
        
        // 暂停定时器
        function stopTimer() {
            if (!isRunning) return;
            clearInterval(timer);
            isRunning = false;
        }
    })
</script>